<template lang="html">
  <div id="pageBox">
    <BgStyle>
      <div class="imgBox" slot="img">

      </div>
      <div class="content pd14" slot="content">
        <div class="mineDetails">
          <div class="imgName">
            <div class="imgBox">
              <img :src="semester.coverImg" alt="">
            </div>
            <div class="name">
              {{ semester.userName }}
            </div>
          </div>
          <div class="details">
            <p class="detailsItem">入学：{{ semester.createTime | parseTime('{y}-{m}-{d}') }}</p>
            <p class="detailsItem">学号：{{ semester.learnNo }}</p>
            <p class="detailsItem">班级：{{ semester.name }}</p>
          </div>
        </div>
        <div class="mineContent pd14">
          <div class="mineBox pd12">
            <div class="mineItem" @click="viewHandBook = true">
              <span class="icon iconfont icon-jihua"></span>
              <span class="mineName">学员手册</span>
              <span class="jt iconfont icon-rjt"></span>
            </div>
            <div class="mineItem" @click="gotoPath('/payClockDate')">
              <span class="icon iconfont icon-riqi"></span>
              <span class="mineName">打卡日历</span>
              <span class="jt iconfont icon-rjt"></span>
            </div>
            <!-- <div class="mineItem">
              <router-link to="/spread">
                <span class="icon iconfont icon-jinqian"></span>
                <span class="mineName">推广赚钱</span>
                <span class="jt iconfont icon-rjt"></span>
              </router-link>
            </div> -->
            <div class="mineItem">
              <router-link to="/contactUs">
                <span class="icon iconfont icon-kefu"></span>
                <span class="mineName">联系客服</span>
                <span class="jt iconfont icon-rjt"></span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </BgStyle>
    <div v-if="viewHandBook" class="handbook-modal" @click="viewHandBook = false">
      <div class="handbook-main" v-html="handBook" @click.stop=""></div>
    </div>
  </div>
</template>

<script>
import BgStyle from "@/components/bgStyle";

import { getSemester, getHandbook } from '@/api/pay'

export default {
  components:{
    BgStyle
  },
  data(){
    return {
      semester: {},
      viewHandBook: false,
      handBook: ''
    }
  },
  created() {
    this.getSemester()
    getHandbook().then(res => {
      this.handBook = res.handbook
    })
  },
  methods:{
    gotoPath(path){
      this.$router.push({
        path
      })
    },
    getSemester() {
      getSemester().then(res => {
        this.semester = res.data
        sessionStorage.setItem('payUserInfo', JSON.stringify(res.data))
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    .content{
      .mineDetails{
        display: flex;
        .imgName{
          width:1rem;
          margin-top:-0.2rem;
          .imgBox{
            width:1rem;
            height:1rem;
            background:#dedede;
            border-radius: 50%;
            border:2px solid #fff;
            box-shadow: 0 0 0.05rem 0.01rem #dedede;
          }
          .name{
            text-align: center;
            font-size:0.18rem;
            margin:0.06rem 0;
          }
        }
        .details{
          flex:1;
          padding-left:0.14rem;
          padding-top:0.26rem;
          .detailsItem{
            font-size:0.14rem;
            color:#999;
            line-height: 0.3rem;
          }
        }
      }
      .mineContent{
        margin-top:0.2rem;
        .mineBox{
          background:#fff;
          border-radius: 0.1rem;
          box-shadow:0 0 0.2rem 0.02rem #dedede;
          .mineItem{
            display: flex;
            line-height: 0.56rem;
            border-bottom:1px solid #dedede;
            a{
              display: flex;
              color: #333;
              width: 100%;
            }
            &:last-child{
              border-bottom:0;
            }
            .icon{
              font-size:0.2rem;
              color:#31c27c;
            }
            .mineName{
              flex:1;
              padding-left:0.1rem;
              font-size:0.16rem;
            }
            .jt{
              color:#999;
            }
          }
        }
      }
    }
  }
  .handbook-modal{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
  }
  .handbook-main{
    position: absolute;
    width: 80%;
    height: 2.4rem;
    border-radius: 10px;
    background: #fff;
    font-size: .14rem;
    color: #666;
    left: 10%;
    top: 50%;
    margin-top: -2rem;
    padding: .12rem;
    box-sizing: border-box;
  }
</style>
